<template component>
  <style>
    :host {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 auto;
      padding: 64px 16px;
      min-height: 50vh;
      overflow: hidden;
    }
    .main {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    p {
      padding: 0;
      margin: 0;
      margin: 0.5em 0;
      line-height: 1.4em;
    }

    .nexts {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      display: flex;
      align-items: center;
      margin: 8px;
      padding: 8px 16px;
      border-radius: 36px;
      cursor: pointer;
      color: var(--md-sys-color-primary);
      border: var(--md-sys-color-primary) solid 1px;
      transition: all 0.3s ease; /* 添加过渡效果，使状态变化更平滑 */
      user-select: none;
    }

    .btn.fadein {
      animation: btn-fadein ease 0.3s both;
      &:nth-child(1) {
        animation-delay: 0.1s;
      }
      &:nth-child(2) {
        animation-delay: 0.2s;
      }
      &:nth-child(3) {
        animation-delay: 0.3s;
      }
      &:nth-child(4) {
        animation-delay: 0.4s;
      }
      &:nth-child(5) {
        animation-delay: 0.5s;
      }
      &:nth-child(6) {
        animation-delay: 0.6s;
      }
      &:nth-child(7) {
        animation-delay: 0.7s;
      }
      &:nth-child(8) {
        animation-delay: 0.8s;
      }
      &:nth-child(9) {
        animation-delay: 0.9s;
      }
      &:nth-child(10) {
        animation-delay: 1s;
      }
    }

    @keyframes btn-fadein {
      0% {
        opacity: 0;
        transform: translate(50px, 0);
      }
      100% {
        opacity: 1;
        transform: translate(0, 0);
      }
    }

    .btn:hover {
      color: var(--md-sys-color-primary);
      background-color: var(--md-sys-color-on-primary);
      animation: random-move 5s infinite alternate ease-in-out;
    }

    @keyframes random-move {
      0% {
        transform: translate(0, 0);
      }
      25% {
        transform: translate(2px, -2px);
      }
      50% {
        transform: translate(-2px, 2px);
      }
      75% {
        transform: translate(2px, 2px);
      }
      100% {
        transform: translate(-2px, -2px);
      }
    }

    .btn:active,
    .btn.checked {
      color: var(--md-ref-palette-primary100);
      background-color: var(--md-ref-palette-primary50);
      transform: scale(0.98); /* 点击时轻微缩小 */
    }

    .hide-nexts {
      .btn {
        margin: 0;
        padding: 0;
        line-height: 0;
        opacity: 0;
      }
    }

    .big1 {
      h5,
      p {
        font-size: 20px;
      }
      h4 {
        font-size: 24px;
      }
      h3 {
        font-size: 28px;
      }
      h2 {
        font-size: 32px;
      }
      h1 {
        font-size: 36px;
      }
    }

    a {
      display: inline-block !important;
      color: var(--md-sys-color-primary);
      text-decoration: underline;
    }

    lumi-list-item,
    li {
      display: block !important;
      margin: 4px 0;
      word-break: break-all;
    }

    lumi-list-item::before {
      display: inline-block;
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 4px;
      margin-right: 8px;
      background-color: var(--md-sys-color-normal);
      vertical-align: middle;
    }
    /* 添加旋转动画 */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top-color: var(--md-ref-palette-primary80);
      animation: spin 1s ease-in-out infinite;
      margin-right: 8px;
      vertical-align: middle;
    }

    /* 美化输入框样式 */
    .custom-input {
      display: block;
      width: 100%;
      max-width: 500px;
      margin: 16px 0;
      padding: 12px 16px;
      font-size: 16px;
      line-height: 1.5;
      color: var(--md-sys-color-on-normal-container);
      background-color: var(--md-sys-color-surface);
      border: 1px solid var(--md-sys-color-normal);
      border-radius: 16px;
      box-sizing: border-box;
      transition: all 0.3s ease;
      outline: none;
    }

    .custom-input:focus {
      border-color: var(--md-sys-color-primary);
      box-shadow: 0 0 0 2px rgba(98, 0, 238, 0.2);
    }

    .custom-input::placeholder {
      color: var(--md-sys-color-normal);
      opacity: 0.7;
    }

    .custom-input:hover {
      border-color: var(--md-sys-color-primary);
    }

    /* 美化提交按钮样式 */
    .submit-btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 30px;
      box-sizing: border-box;
      height: 36px;
      padding: 0 24px;
      cursor: pointer;
      user-select: none;
      font-size: 14px;
      font-weight: 500;
      background-color: var(--md-sys-color-primary);
      color: var(--md-sys-color-on-primary);
      border: none;
      transition: all ease 0.2s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .submit-btn:active {
      background-color: var(--md-ref-palette-primary50);
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .submit-btn:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.3);
    }

    .submit-btn[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
      opacity: 0.5;
      background-color: var(--md-ref-palette-primary50);
    }

    .submit-btn[disabled]:hover {
      background-color: var(--md-ref-palette-primary50);
      transform: none;
      box-shadow: none;
    }

    .tick {
      display: inline-block;
      width: 0px;
      overflow: hidden;
      transition: all ease 0.3s;
    }

    .btn.checked .tick {
      width: 20px;
    }
  </style>
  <div class="main">
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      "
    >
      <span class="loading-spinner"></span>
    </div>
  </div>
  <o-if :value="isEnd">
    <h5>Continue</h5>
    <div class="nexts" class:hide-nexts="hideNexts">
      <o-fill :value="nextArticles">
        <div
          class="btn fadein"
          attr:data-aid="$data.aid"
          class:checked="$data.aid === $host.checkedAid"
          on:click="$host.clickNext($data)"
          on:mouseenter="$host.enterBtn($event)"
        >
          <span class="tick"> ✅ </span>
          {{$data.title}}
        </div>
      </o-fill>
    </div>
    <div
      style="
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <input
        class="custom-input"
        type="text"
        sync:value="newQuestion"
        placeholder="Enter your questions..."
        attr:disabled="questionSubmited"
        on:keydown="queKeydown"
        style="flex: 1; margin-right: 8px"
      />
      <button
        class="submit-btn"
        on:click="submitQuestion"
        attr:disabled="questionSubmited"
      >
        Submit
      </button>
    </div>
  </o-if>
  <script>
    const cached = {}; // 已经加载过的文章id

    export default async ({ load }) => {
      return {
        tag: "block-view",
        attrs: {
          aid: null,
          queryAnswer: null,
        },
        data: {
          gid: -1, // 当前在第几个
          nextArticles: [],
          isEnd: false,
          hideNexts: true,
          checkedAid: null,
          newQuestion: "",
          questionSubmited: false,
        },
        watch: {
          aid(aid) {
            if (aid) {
              this.loadArticle();
            }
          },
          queryAnswer(queryAnswer) {
            if (queryAnswer) {
              this.loadQuestion();
            }
          },
        },
        proto: {
          queKeydown(e) {
            if (e.key === "Enter") {
              this.submitQuestion();
            }
          },
          submitQuestion() {
            this.emit("submit-question", {
              data: { question: this.newQuestion },
            });
            this.questionSubmited = true;
          },
          enterBtn(e) {
            e.target.classList.remove("fadein");
          },
          clickNext(data) {
            this.checkedAid = data.aid;
            this.questionSubmited = false;
            this.newQuestion = "";
            this.emit("click-next", {
              data: {
                ...data,
                gid: this.gid,
              },
            });
          },
          async loadQuestion() {
            const mainElement = this.shadow.$(".main");

            const { chat } = await load(
              "https://cdn.jsdelivr.net/npm/ai-tunnel/static/chat.js"
            );

            await chat({
              url: window.chaturl,
              prompt: this.queryAnswer,
              onMessage: ({ content }) => {
                if (content.length < 500) {
                  mainElement.classList.add("big1");
                }
                mainElement.html = content;
              },
            }).catch((error) => {
              console.error("聊天出错:", error);
            });

            this.isEnd = true;
          },
          loadArticle() {
            clearTimeout(this._timer);
            const mainElement = this.shadow.$(".main");

            this._timer = setTimeout(() => {
              const targetData = this.host.allArticleData.find(
                (e) => e.aid === this.aid
              );

              if (targetData.html.length < 500) {
                this.shadow.$(".main").classList.add("big1");
              }

              const content = `<h2>${targetData.title}</h2>\n${targetData.html}`;

              if (cached[this.aid]) {
                mainElement.html = content;
                this.isEnd = true;
                setTimeout(() => {
                  this.hideNexts = false;
                }, 100);
                return;
              }

              let index = 0;
              mainElement.html = "";
              let s_content = "";
              const interval = setInterval(
                () => {
                  if (index < content.length) {
                    // 当内容长度大于1000字时，一次性塞3个字符
                    if (content.length > 1000) {
                      for (let i = 0; i < 5 && index < content.length; i++) {
                        s_content += content[index];
                        index++;
                      }
                    } else {
                      s_content += content[index];
                      index++;
                    }
                    mainElement.html = s_content;
                  } else {
                    this.isEnd = true;
                    cached[this.aid] = true;
                    setTimeout(() => {
                      this.hideNexts = false;
                    }, 100);
                    clearInterval(interval);
                  }
                },
                targetData.html.length < 500 ? 10 : 0
              );

              this.nextArticles = Object.values(targetData.nexts);
            }, 500 + Math.random() * 1000);
          },
        },
        attached() {},
      };
    };
  </script>
</template>
